<template>
	<view class="price-order-container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true" :show-default-loading-more-text="false" >
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="" slot="top" >
					<u-navbar back-icon-color="#000000" :title="priceData.name" :back-icon-size="40" :background="{backgroundColor: '#FFBB1A'}"
					:title-color="textColor" :border-bottom="false" :title-bold="true">
					</u-navbar>
					<view class="price-header"></view>
					<view class="position-box">
						<view class="template-price u-flex u-col-center u-row-between u-p-32">
							<view style="flex:1;">
								<view class="t-p-title">{{priceData.name}}</view>
								<view class="t-p-content">{{priceData.profile}}</view>
								<view class="t-p-bot">共{{priceData.count}}个品</view>
							</view>
							<!-- <view class="t-p-btn" @click="$mRouter.push({route:'/pages/sale/myCustomers/priceOrder'})">签约</view> -->
						</view>
					</view>
					<!-- <view style="height: 145rpx;" ></view> -->
					<view class="u-p-20">
						<u-search :searchIconFlag="true" v-model="searchValue"
						 input-align="center" placeholder="商品名称" height="70" :border-color="'#FFBB1A'" :bg-color="'#fff'" 	
						 :show-action="false" @change="debounceFn()" @search="reloadFn"></u-search>
					</view>
			</view>
			<view class="history-container u-p-l-35 u-p-r-35">
				<view class="" v-for="(item, index) in dataList" :key="item.id" >
					<view class="history-item u-p-t-30 u-p-b-30  u-flex ">
						<image :src="item.itemResourceUrl" mode="" style="display:block;width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 10rpx;"></image>
						<view class="" style="flex: 1;overflow: hidden;">
							<view class="u-font-30 u-line-1" style="font-weight: 500;">{{item.name}}</view>
							<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
								{{item.specification}}
							</view>
						</view>
						<view class="" style="width: 200rpx;">
							<view class="u-text-right" >
								<view class="u-font-32" style="color: #ff551a;" >
									￥{{item.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view slot="bottom" style="background-color: #fff;padding: 30rpx 35rpx 80rpx;">
					<view class="sign-btn" @tap="signContractFn()">立即签约</view>
			</view>
		</z-paging>
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
import signContractVue from './signContract.vue';
import { useShopStore } from '@/store/shop.js';
import { useUserStore } from '@/store/user.js';
import { mapState } from 'pinia';
	export default{
		data(){
			return {
				loading:false,
				searchValue:'',
				dataList:[],
				priceData:{},
				priceType:'',
				introducerId:'',
				distributorId:'',
			}
		},
		onLoad(options) {
			this.priceData = JSON.parse(options.item);
			this.priceType = options.type;
			this.introducerId = options.introducerId;
			this.distributorId = options.distributorId;
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'}),
			...mapState(useUserStore, {storeUser: 'user'}),
		},
		methods:{
			reloadFn(){
				this.$refs.paging.reload();
			},
			debounceFn(){
				this.$u.debounce(this.reloadFn, 500)
			},
			async signContractFn(){
				this.loading = true;
				if(this.storeShop.managerId!==this.storeUser.id){
					this.loading = false;
					this.$u.toast('您不是企业的管理员，请联系管理员签约~');
					return false;
				}
				let params = {
					priceTemplateId:this.priceData.id,
					introducerId:this.introducerId,
					distributorId:this.distributorId,
				}
				const res = await this.$newHttp.post('api/v1.2/Shop/CreateSigningApplication',params );
				this.loading = false;
				if(res.code === 200){
					this.$mRouter.push({route:'/pages/purchase/mySale/signResult'});
				}else{
					// this.$mRouter.push({route:'/pages/purchase/mySale/signResult'});
					this.$u.toast('签约失败，错误信息：'+res.erroMessage)
				}
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					IsPaging:true,
					templateId:this.priceData.id
				}
					
				if(this.searchValue != ''){
					params.name = this.searchValue
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/Shop/v2/getPriceTemplateItems', { params: params } );
				uni.hideLoading({})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete([]);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.price-order-container{
		height: 100%;
		background-color: #fff;
		.price-header{
			background-color: #ffbb1a;
			box-sizing: border-box;
			padding: 50rpx 65rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			position: absolute;
			left: 0;
			top: 44px;
			width: 100%;z-index:1;
			
		}
		.position-box{
			width: 100%;
			position: relative;
			box-sizing: border-box;
			padding: 0 35rpx;
			z-index:2;
		}
		.template-price{
			background-color: #fff;
			box-shadow: 0px 0px 18rpx 2rpx rgba(8,1,3,0.05);
			border-radius: 20rpx;
			.t-p-title{
				font-weight: bold;
			}
			.t-p-content{
				color: #999;
				margin: 20rpx 0;
			}
			.t-p-btn{
				background-color: #ffbb1a;
				box-sizing: border-box;
				padding: 12rpx 32rpx;
				border-radius: 50rpx;
				margin-left: 20rpx;
			}
		}
		.sign-btn{
			background-color: #ffbb1a;
			box-sizing: border-box;
			padding: 30rpx 0;
			border-radius: 50rpx;
			text-align: center;
		}
	}
</style>